<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width"/>
<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
<title>我的文章</title>
<link rel="stylesheet" type="text/css" href="../../css/aui-flex.css" />
<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
<link rel="stylesheet" type="text/css" href="../../css/common.css" />
<style>
body{
    background: #F5F7F8;
}
/*#conTop{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 14
}*/
.conBox{
    color:#333;
    padding: 0.7rem 0.8rem 0.7rem 1.5rem;
}
.conBox p{
    color:#333333;
}
.conBox ul li>img{
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    margin-top: 0.4rem;
}
.numBold{
    font-size:1.2rem;
    color:#333;
    font-weight: bold;
}
/*修改aui默认样式*/
.aui-tab{
    box-shadow: none;
    -moz-box-shadow: none;/* 老的 Firefox */
    padding: 0 0.2rem;
}
.aui-tab .aui-tab-item {
    font-size: 0.6rem;
    height: 1.8rem;
    line-height: 1.8rem;
    position: relative;
}
.pt-8{
  padding-top: 0.4rem;
}
.nameLike{
  padding-top: 0.4rem;
}
.nameLike .follow{
  width: 4rem;
  height: 1.2rem;
  line-height: 1.2rem;
  background: #E73350;
  font-size:0.6rem;
  border-radius: 5rem;
  text-align: center;
  color:#fff;
}
.text-bold{
  font-weight: bold;
}
.disbale{
  background: #ccc !important;
}
.comGodList .btmInfo .like {
	color: #adadad;
	padding-left: 0.85rem;
	background-repeat: no-repeat;
	background-position: left center;
	background-size: auto 0.6rem;
	background-image: url(../../image/common/21.png);
}
.comGodList .btmInfo .like.on {
	color: #333;
	background-image: url(../../image/common/22.png);
}
.earnPrice{
  position: absolute;
  top:0.45rem;
  right:0;
  width: 2.9rem;
  height: 1rem;
  background: #E73350;
  border-radius: 100px 0 0 100px;
  font-size: 10px;
  color: #FFFFFF;
  text-align: center;
  line-height: 1.1rem;
}
</style>
</head>
<body>
  <div class="aui-content bg-white" id="conTop">
    <div id="dot_html">

    </div>
  </div>
    <script type="text/x-dot-template" id="dot_tpl">
      <div class="aui-content bg-white" id="conTop">
          <div class="conBox">
              <ul class="aui-flex-col aui-flex-between aui-flex-middle">
                  <li>
                      <img class="img" src="{{=it.user_avatar}}" alt="">
                      <p class="aui-font-size-14 aui-text-center text-bold pt-8">{{=it.user_nickname}}</p>
                  </li>
                  <li tapmode onclick="openWin('follow_win')">
                      <p class="numBold">{{=it.concern || '0'}}</p>
                      <p class="aui-font-size-12 text">关注</p>
                  </li>
                  <li tapmode onclick="openWin('fans_win')">
                      <p class="numBold">{{=it.fans || '0'}}</p>
                      <p class="aui-font-size-12 text">粉丝</p>
                  </li>
                  <li>
                      <p class="numBold">{{=it.like || '0'}}万</p>
                      <p class="aui-font-size-12">获赞</p>
                  </li>
              </ul>
              <div class="nameLike aui-flex-col aui-hide aui-flex-between" id="nameLike">
                <div class="aui-font-size-14 color-333 text-bold">{{=it.user_nickname}}</div>
                <div></div>
                <div class="follow" tapmode onclick="follow(this)">+关注</div>
              </div>
          </div>
          <div class="aui-tab" id="type-tab">
              <div class="aui-tab-item aui-active" tapmode onClick="openNews(0);"><span class="my">我</span>的文章<span class="aui-padded-l-5">{{=it.myarticle || '0'}}</span></div>
              <div class="aui-tab-item" tapmode onClick="openNews(1);"><span class="my">我</span>的收藏<span class="aui-padded-l-5">{{=it.mycollect || '0'}}</span></div>
              <div class="aui-tab-item" tapmode onClick="openNews(2);"><span class="my">我</span>的推荐<span class="aui-padded-l-5">{{=it.myrecommend || '0'}}</span></div>
          </div>
      </div>
    </script>
  <div class="comFlowBox">
  	<div class="comGodList" id="flow_html">
  		<div class="grid-sizer"></div>


  	</div>
  </div>
  <script type="text/x-dot-template" id="flow_tpl">
  {{ for(var i in it){ }}
  <div class="item">
  	<div class="inner">
  		<div class="photo" tapmode onClick="openPost()"><img src="{{=it[i].article_cover}}" alt=""></div>
  		<div class="textBox">
  			<div class="title aui-flex-col aui-flex-middle">
  				<div class="aui-ellipsis-2">{{=it[i].article_title}}</div>
  			</div>
  			<div class="btmInfo aui-flex-col aui-flex-middle aui-flex-between">
  				<div><div class="avatar"><img src="{{=it[i].user_avatar}}" alt=""></div></div>
  				<div class="flex-auto name aui-ellipsis-1">{{=it[i].user_nickname}}</div>
  				<div class="like" tapmode onClick="togLike(this)">7629</div>
  			</div>
  		</div>
  	</div>
  </div>
  {{ } }}
  </script>
</body>
<script type="text/javascript" src="../../script/import.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/imagesloaded.pkgd.min.js"></script>
<script type="text/javascript" src="../../script/masonry.pkgd.min.js"></script>
<script type="text/javascript">
	var gridDom = '#flow_html';
	var grid;
  var postData = {};
  var isLoading = false;
  var loadFlag = true;
  var pageSize = 50;
  var currentPage = 1;
  var draft = 1;
  apiready = function() {
    api.parseTapmode();
    // 监听到达底部
    api.addEventListener({
      name: 'scrolltobottom',
      extra: {
        threshold: 0
      }
    }, function(ret, err) {
      if(isLoading)return;
      if(loadFlag){
        getAricleList();
      }
    });
    openNews(0)
    // getAricleList();
    getMyPage()
  };

    function getMyPage(){
      api.ajax({
          url: BASE_URL + 'App/Article/myPage',
          method: 'post',
          data: {
              values: {
                userid: getUserId()
              },
          }
      },function(ret, err){
          if (ret) {
              var tpl = $$('#dot_tpl').html();
              var tempFn = doT.template(tpl);
              $$('#dot_html').html(tempFn(ret.data));
              var name = api.pageParam.name;
              if(name != 'my'){
                $$('.my').text('Ta');
                $$('.nameLike').removeClass('aui-hide')
              }else{
                $$('.my').text('我');
              }
          } else {
            toast(ret.msg)
          }
      });

    }
  function openNews(ind) {
      $$('#type-tab > div').removeClass('aui-active').eq(ind).addClass('aui-active');
      if(ind == 0){
        getAricleList()
      }
      if(ind == 1){
        getCollect()
      }
      if(ind == 2){
        getRecommend()
      }
  }
  function follow(el){
      var text = $$(el).text();
      if(text == '+关注'){
        $$(el).text('已关注');
        $$(el).addClass('disbale')
      }else{
        $$(el).text('+关注');
        $$(el).removeClass('disbale')
      }
    }
	//调用瀑布流
	grid = new Masonry( gridDom, {
		columnWidth: '.grid-sizer',
		itemSelector: '.item',
		percentPosition: true
	});
	imagesLoaded( gridDom, function() {
		grid.layout();
	});

	//瀑布流
	// function getFlow(){
	// 	var tpl = $$('#flow_tpl').html();
	// 	var tempFn = doT.template(tpl);
	// 	var elem = $$( tempFn( ) );
  //
	// 	$$(gridDom).append( elem );
	// 	grid.appended( elem );
	// 	imagesLoaded( gridDom, function() {
	// 		grid.layout();
	// 	});
		// api.parseTapmode();
	// }
  function getFlow(flowData) {
      var tpl = $$('#flow_tpl').html();
      var tempFn = doT.template(tpl);
      var elem = $$(tempFn(flowData));
      if( currentPage==1 ){
          $$('#flow_html').html('<div class="grid-sizer"></div>');
      }
      $$(gridDom).append(elem);
      grid.appended(elem);
      imagesLoaded(gridDom, function() {
          grid.layout();
      });

      api.parseTapmode();
  }
	//喜欢 不喜欢切换
	function togLike(el){
		var _this = $$(el);
		_this.toggleClass('on');
	}
  // 获取收藏
  function getAricleList(){
    showProgress();
  	isLoading = true;
    postData.userid = getUserId();
    postData.pageNo = currentPage;
    postData.pageSize = pageSize;
    postData.draft = draft;
    api.ajax({
        url: BASE_URL + 'App/Article/myArticleList',
        method: 'post',
        data: {
            values: postData,
        }
    },function(ret, err){
        if (ret) {
          if(ret.code == 1 && ret.data.length > 0){
              getFlow(ret.data);
              currentPage++;
              api.parseTapmode();
              //如果加载出来的数量 小于 pagesize 说明到底线了
              if(ret.data.length < postData.pageSize){
                  loadFlag = false;
              }
            }else{
      				if(currentPage == 1){
                  $$('#flow_html').html('');
                  // $$('.noMoreData').addClass('aui-hide');
                  // $$('.noData').removeClass('aui-hide');
              }else{
                  // $$('.noMoreData').removeClass('aui-hide');
              }
              loadFlag = false;
      			}
        }
        isLoading = false;
        hideProgress();
    });

  }
  function getCollect(){
    showProgress();
    isLoading = true;
    postData.userid = getUserId();
    postData.pageNo = currentPage;
    postData.pageSize = pageSize;
    api.ajax({
        url: BASE_URL + 'App/Article/collectArticles',
        method: 'post',
        data: {
            values: postData,
        }
    },function(ret, err){
        if (ret) {
          if(ret.code == 1 && ret.data.length > 0){
              // getFlow(ret.data);
              currentPage++;
              api.parseTapmode();
              //如果加载出来的数量 小于 pagesize 说明到底线了
              if(ret.data.length < postData.pageSize){
                  loadFlag = false;
              }
            }else{
              if(currentPage == 1){
                  $$('#flow_html').html('');
                  // $$('.noMoreData').addClass('aui-hide');
                  // $$('.noData').removeClass('aui-hide');
              }else{
                  // $$('.noMoreData').removeClass('aui-hide');
              }
              loadFlag = false;
            }
        }
        isLoading = false;
        hideProgress();
    });

  }
  // 推荐
  function getRecommend(){
    showProgress();
    isLoading = true;
    postData.userid = getUserId();
    postData.pageNo = currentPage;
    postData.pageSize = pageSize;
    api.ajax({
        url: BASE_URL + 'App/Article/myRecommend',
        method: 'post',
        data: {
            values: postData,
        }
    },function(ret, err){
        if (ret) {
          console.log(JSON.stringify(ret))
          if(ret.code == 1 && ret.data.length > 0){
              getFlow(ret.data);
              currentPage++;
              api.parseTapmode();
              //如果加载出来的数量 小于 pagesize 说明到底线了
              if(ret.data.length < postData.pageSize){
                  loadFlag = false;
              }
            }else{
              if(currentPage == 1){
                  $$('#flow_html').html('');
                  // $$('.noMoreData').addClass('aui-hide');
                  // $$('.noData').removeClass('aui-hide');
              }else{
                  // $$('.noMoreData').removeClass('aui-hide');
              }
              loadFlag = false;
            }
        }
        isLoading = false;
        hideProgress();
    });

  }
  //打开点赞文章详情
  function openPost(){
  	api.openWin({
  		name: 'post_detail_win',
  		url: '../post/post_detail_win.html',
  		bounces: false,
  		pageParam: {
  			key : 'value'
  		}
  	});
  }
</script>
</html>
